import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { connect } from '@tarojs/redux'

import SubTitle from '../../component/SubTitle'
import HistoryList from '../../component/HistoryList'
import Chart from '../../component/Chart'

import './style.less';

@connect((state) => ({
  history: state.system.practice.history
}))
class History extends Component {
  constructor(props) {
    super(props);
    this.state = {
      category: 'all'
    }
  }
  config = {
    navigationBarTitleText: '百格计算',
    navigationBarBackgroundColor: '#6C8AF8',
    navigationBarTextStyle: 'white',
  }
  changeState = (key, val) => {
    this.setState({ [key]: val });
  }
  render() {
    const { category } = this.state;
    const { history } = this.props;
    let conditions = [
      [{ label: '全部', val: 'all' }],
      [
        { label: '加法(10以内)', val: 1 },
        { label: '加法(20以内)', val: 3 }
      ],
      [
        { label: '减法(10以内)', val: 2 },
        { label: '减法(20以内)', val: 4 }
      ],
    ]
    if (history.result && history.result.results) {
      return (
        <View>
          <SubTitle type='special-text' title='历史表现' />
          <Chart history={history} category={category} />
          {
            conditions.map((row, i) => (
              <View key={i} className='category' >
                {
                  row.map((item, index) => (
                    <View
                      key={index}
                      className={`item ${category === item.val && 'active'}`}
                      onClick={this.changeState.bind(this, 'category', item.val)}
                    >
                      {item.label}
                    </View>
                  ))
                }
              </View>
            ))
          }
          <HistoryList />
        </View>
      )
    }
    return (
      <View>
        <SubTitle type='special-text' title='历史表现' />
        暂无数据
      </View>
    )
  }
}

export default History;
